<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<jsp:include page="/head.jsp"></jsp:include>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>AJAX</title>
</head>

<body>
	<div id="show"></div>
	<hr style="width:100%; clear:left;" />
	<button>发送同步请求</button>
	<button>发送异步请求</button>
	<button>发送十次同步请求</button>
	<button>发送十次异步请求</button>
	<button>消息提示</button>
	<button>警告提示</button>
	<button>错误提示</button>
	<button>成功提示</button>
	<script>
		var show = document.querySelector("#show");
		var btns = document.querySelectorAll("button");
		console.info(show);
		console.info(btns);
		//					xhr.readyState//读取状态
		/**
		0: 请求未初始化
		1: 服务器连接已建立
		2: 请求已接收
		3: 请求处理中
		4: 请求已完成，且响应已就绪
		**/
		//					xhr.status 响应状态码 404 500 200-成功
		//					xhr.responseText
		btns[0].onclick = () => {
			let xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function() {
				console.info(xhr.readyState + ":" + xhr.status)
				if(xhr.readyState == 4 & xhr.status == 200) {
					console.info(xhr.statusText);
					show.innerHTML += xhr.responseText;
				}
			}

			xhr.open("GET", "demo/inc.jsp?name=false", false);
			xhr.send();
		};

		btns[1].addEventListener("click", function() {
			let xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function() {
				console.info(xhr.readyState + ":" + xhr.status)
				if(xhr.readyState == 4 & xhr.status == 200) {
					console.info(xhr.statusText);
					show.innerHTML += xhr.responseText;
				}
			}

			xhr.open("GET", "demo/inc.jsp?name=true", true);
			xhr.send();
		});

		btns[2].addEventListener("click", function() {
			for(let i = 0; i < 10; i++) {
				let xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4 & xhr.status == 200) {
						show.innerHTML += xhr.responseText;
					}
				}
				xhr.open("GET", "demo/inc.jsp?name=" + 1, false);
				xhr.send();
			}
		});

		btns[3].addEventListener("click", function() {
			for(let i = 0; i < 10; i++) {
				let xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4 & xhr.status == 200) {
						show.innerHTML += xhr.responseText;
					}
				}
				xhr.open("GET", "demo/inc.jsp?name=" + i, true);
				xhr.send();
			}
		});
		
		btns[4].addEventListener("click",function(){
			sys.toastr.alert("alert");
			sys.toastr.info("info");
		});
		
		btns[5].addEventListener("click",function(){
			sys.toastr.warn("warn");
		});
		
		btns[6].addEventListener("click",function(){
			sys.toastr.error("error");
		});
		
		btns[7].addEventListener("click",function(){
			sys.toastr.success("success");
		});
	</script>
</body>

</html>